<template>
    <div class="page">
        <div class="reviews-main">
            <div class="reviews-title">商品评价({{total}})</div>
            <div class="reviews-wrap" v-show="reviews.length>0">
                <div class="reviews-list" v-for="(item,index) in reviews" :key="index">
                    <div class="uinfo">
                        <div class="head"><img src="../../../assets/images/common/lazyImg.jpg" :data-echo="item.head"></div>
                        <div class="nickname">{{item.nickname}}</div>
                    </div>
                    <div class="reviews-content" v-html="item.content">
                    </div>
                    <div class="reviews-date">{{item.times}}</div>
                </div>
            </div>
            <div class="no-data" v-show="reviews.length<=0">暂无评价</div>
        </div>
    </div>
</template>

<script>
import {mapState,mapActions} from "vuex";
import UpRefresh from '../../../assets/js/libs/uprefresh'   //引入分页插件
export default {
    name:"goods-review",
    data () {
        return {
            gid:this.$route.query.gid ? this.$route.query.gid:""
        }
    },
    created(){
        //new一个分页的实例对象
        this.pullUp = new UpRefresh();
        this.getReviews({gid:this.gid,success:(pageNum)=>{
            this.$nextTick(()=>{
                this.$utils.lazyImg();
            });
        this.pullUp.init({"curPage":1,"maxPage":parseInt(pageNum),"offsetBottom":100},(page)=>{
                // console.log(page);
                this.getReviewsPage({gid:this.gid,page:page});
            })
        }});
    },
    computed:{
        ...mapState({
            reviews:state=>state.goodsReview.reviews,
            total:state=>state.goodsReview.total,
        })
    },
    methods:{
        ...mapActions({
            "getReviews":"goodsReview/getReviews",
            "getReviewsPage":"goodsReview/getReviewsPage",
        })
    },
    //离开页面的时候要记得卸载监听事件
    beforeDestroy(){
        this.pullUp.uneventSrcoll();
    }
}
</script>

<style scoped>
    .page{margin-top:1.2rem;}
    .reviews-main{width:100%;background-color: #FFFFFF;margin-top:0.5rem;overflow:hidden;padding-bottom: 0.5rem}
    .reviews-main .reviews-title{color:#7b7f82;font-size:0.32rem;width:90%;margin:0 auto;margin-top:0.2rem;}
    .reviews-main .reviews-wrap{width:90%;margin:0 auto;}
    .reviews-main .reviews-wrap .reviews-list{width:100%;margin-top:0.4rem;}
    .reviews-main .reviews-list .uinfo{width:100%;display:flex;display:-webkit-flex;height:0.6rem;align-items: center;-webkit-align-items: center;}
    .reviews-main .reviews-list .uinfo .head{width:0.6rem;height:0.6rem;margin-right:0.2rem;}
    .reviews-main .reviews-list .uinfo .head img{width:100%;height:100%;border-radius: 100%;}
    .reviews-main .reviews-list .uinfo .nickname{width:auto;font-size:0.28rem;}
    .reviews-main .reviews-list .reviews-content{width:100%;margin:0 auto;font-size:0.28rem;margin-top:0.2rem;}
    .reviews-main .reviews-list .reviews-date{width:auto;font-size:0.28rem;color:#7b7f82;margin-top:0.2rem;}
    .reviews-main .reviews-more{width:2.44rem;height:0.56rem;border:solid 1px #D50A17;line-height:0.56rem;text-align:center;font-size:0.28rem;margin:0 auto;margin-top:0.5rem;border-radius: 0.1rem;}
</style>